<!-- 蓝色简洁登录页面 -->
<template>
	<view class="t-login" style="height: 100vh;">
		<!-- 页面装饰图片 -->
		<image class="img-a" src="@/static/imgs/bg1.png"></image> 
		<view   style=" width: 260rpx;height: 260rpx;margin:100rpx auto;" >
				<u--image :showLoading="true"  src="/static/logo.png" width="260rpx" height="260rpx" radius='16rpx' @click="click"></u--image>
		</view>
	
		<!-- 标题 -->
		<view class="t-b">{{ title }}</view> 
		<form class="cl">
			<view class="t-a">
				<image src="@/static/imgs/sj.png"></image>
				<view class="line"></view>
				<input type="number" name="phone" placeholder="请输入手机号" maxlength="11" v-model="mobile" />
			</view>
			<view class="t-a">
				<image src="@/static/imgs/yz.png"></image>
				<view class="line"></view>
				<input   name="code" maxlength="6" placeholder="请输入密码" v-model="password" />
				  
			</view>
			<view class="t-a">
				<image src="@/static/imgs/yz.png"></image>
				<view class="line"></view>
				<input   name="code" maxlength="6" placeholder="确认密码" v-model="repassword" />
				  
			</view>
			<button @tap="login()">注 册</button>
		</form>
		<view class="" style="margin-top:60rpx;">
			<u-row >
				<u--text @click="tologin" text='已有账号？去登录'  align='center' color='#fff'></u--text>
				
			</u-row>
		</view>
 
	</view>
</template>
<script>
	var that
	import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
	let UserInfo = require('../../../../service/UserInfo') , mUserInfo;
export default {
	data() {
		return {
			title: '欢迎回来！', //填写logo或者app名称，也可以用：欢迎回来，看您需求
			second: 60, //默认60秒 
			mobile: '', //手机号码 
			password:'',
			repassword:''
		};
	},
	onLoad() {
		that = this
		mUserInfo = new UserInfo(this.mNetTool)
	},
	methods: {
		...mapMutations('login',{setUserInfo:'SET_USERINFO'}),
		tologin(){
			uni.navigateTo({
				url:'../login'
			})
		},
		//当前登录按钮操作
		login() {
			var that = this;
			if (!that.mobile) {
				uni.showToast({ title: '请输入手机号', icon: 'none' });
				return;
			}
			if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(that.mobile)) {
				uni.showToast({ title: '请输入正确手机号', icon: 'none' });
				return;
			}
			
			if (that.password != that.repassword) {
				uni.showToast({ title: '两次密码不一致', icon: 'none' });
				return;
			}
			//....此处省略，这里需要调用后台验证一下验证码是否正确，根据您的需求来
			that.setUserInfo({
				mobile : that.mobile ,
				password : that.password
			})
			uni.showLoading({
				title:'请稍等...'
			})
			mUserInfo.list({
				mobile:that.mobile
			},res=>{
				if(res.records == 0){
					this.mNetTool.getAjaxUrlValueBackground('capi/loomoSMS/getCode',{
							mobile:that.mobile,
							signature:'科目叁'
					},res => {
						console.log(res)
						if(res.success){ 
							uni.$u.toast('验证码发送成功请，注意查收')
							uni.navigateTo({
								url:'code'
							})
						 
						}else{
							uni.$u.toast('服务器错误！')
						}
					})
				}else{
					uni.$u.toast('该号码已注册')
				}
				console.log(res)
			})
		},
		//获取短信验证码
		getCode() {
			var that = this;
			var interval = setInterval(() => {
				that.showText = false;
				var times = that.second - 1;
				//that.second = times<10?'0'+times:times ;//小于10秒补 0
				that.second = times;
				console.log(times);
			}, 1000);
			setTimeout(() => {
				clearInterval(interval);
				that.second = 60;
				that.showText = true;
			}, 60000);
			//这里请求后台获取短信验证码
			uni.request({
				//......//此处省略
				success: function(res) {
					that.showText = false;
				}
			});
		},
		//等三方微信登录
		wxLogin() {
			uni.showToast({ title: '微信登录', icon: 'none' });
		},
		//第三方支付宝登录
		zfbLogin() {
			uni.showToast({ title: '支付宝登录', icon: 'none' });
		}
	}
};
</script>
<style>
page{
	background-size: 100% 100%;
	background-position: 0px 0px,0px 0px,0px 0px,0px 0px,0px 0px;
	background-image: repeating-linear-gradient(315deg, #00FFFF2E 92%, #073AFF00 100%),repeating-radial-gradient(75% 75% at 238% 218%, #00FFFF12 30%, #073AFF14 39%),radial-gradient(99% 99% at 109% 2%, #00C9FFFF 0%, #073AFF00 100%),repeating-radial-gradient(99% 99% at 21% 78%, #2B184794 0%, #2B184794 51%, #073AFF00 100%),radial-gradient(160% 154% at 711px -303px, #2000FFFF 0%, #073AFFFF 100%);
	 }
.img-a {
	position: absolute;
	width: 100%;
	top: -150rpx;
	right: 0;
}
.img-b {
	position: absolute;
	width: 50%;
	bottom: 0;
	left: -50rpx;
	/* margin-bottom: -200rpx; */
}
.t-login {
	width: 650rpx;
	margin: 0 auto;
	font-size: 28rpx;
	color: #000;
}

.t-login button {
	font-size: 28rpx;
	background: #5677fc;
	color: #fff;
	height: 90rpx;
	line-height: 90rpx;
	border-radius: 50rpx;
	box-shadow: 0 5px 7px 0 rgba(86, 119, 252, 0.2);
}

.t-login input {
	padding: 0 20rpx 0 120rpx;
	height: 90rpx;
	line-height: 90rpx;
	margin-bottom: 50rpx;
	background: #f8f7fc;
	border: 1px solid #e9e9e9;
	font-size: 28rpx;
	border-radius: 50rpx;
}

.t-login .t-a {
	position: relative;
}

.t-login .t-a image {
	width: 40rpx;
	height: 40rpx;
	position: absolute;
	left: 40rpx;
	top: 28rpx;
	/* border-right: 2rpx solid #dedede; */
	margin-right: 20rpx;
}
.t-login .t-a .line{
	width: 2rpx;
	height: 40rpx;
	background-color: #dedede;
	position: absolute;
	top: 28rpx;
	left: 98rpx;
}

.t-login .t-b {
	text-align: left;
	font-size: 46rpx;
	color: #fff;
	padding: 15rpx 0 30rpx 0;
	font-weight: bold;
}
.t-login .t-b2 {
	text-align: left;
	font-size: 32rpx;
	color: #aaaaaa;
	padding: 0rpx 0 120rpx 0;
}

.t-login .t-c {
	position: absolute;
	right: 22rpx;
	top: 22rpx;
	background: #5677fc;
	color: #fff;
	font-size: 24rpx;
	border-radius: 50rpx;
	height: 50rpx;
	line-height: 50rpx;
	padding: 0 25rpx;
}

.t-login .t-d {
	text-align: center;
	color: #999;
	margin: 80rpx 0;
}

.t-login .t-e {
	text-align: center;
	width: 250rpx;
	margin: 50rpx auto 0;
}

.t-login .t-g {
	 
}

.t-login .t-e image {
	width: 50rpx;
	height: 50rpx;
}

.t-login .t-f {
	text-align: center;
	margin: 90rpx 0 0 0;
	color: #9d9d9d;
}

.t-login .t-f text {
	margin-left: 20rpx;
	color: #aaaaaa;
	font-size: 27rpx;
}

.t-login .uni-input-placeholder {
	color: #000;
}

.cl {
	zoom: 1;
}

.cl:after {
	clear: both;
	display: block;
	visibility: hidden;
	height: 0;
	content: '\20';
}
</style>
